
<template>
  <div>
    <div class="container">
      <img :src="userInfo.avatar" alt="用户头像">
      <span>{{userInfo.nickName}}</span>
      <h1 class="like">我的点赞</h1>
      <div class="likes-section">
        <h1 class="section-title">文章</h1>
        <div v-if="likeArticleList.length > 0" v-for="(item, index) in likeArticleList" :key="index" class="article-preview">
          <img :src="item.articleHover" alt="文章图片" class="article-image">
          <div class="article-details">
            <h2>{{ item.articleTitle }}</h2>
            <!-- 这里可以添加更多文章详情，如描述、作者等 -->
          </div>
<!--          <div class="article-actions">-->
<!--            <button @click="removeLike('article', index, item.id)">-->
<!--              <i class="el-icon-delete"></i> &lt;!&ndash; 假设使用Element UI的图标 &ndash;&gt;-->
<!--            </button>-->
<!--          </div>-->
        </div>
      </div>
      <div class="likes-section">
        <h1 class="question-title">问答</h1>
        <div v-if="likeProblemList.length > 0" v-for="(item, index) in likeProblemList" :key="index" class="article-preview">
          <img :src="item.problemHover" alt="文章图片" class="article-image">
          <div class="article-details">
            <h2>{{ item.problemTitle }}</h2>
            <!-- 这里可以添加更多文章详情，如描述、作者等 -->
          </div>
<!--          <div class="article-actions">-->
<!--            <button @click="removeLike('article', index, item.id)">-->
<!--              <i class="el-icon-delete"></i> &lt;!&ndash; 假设使用Element UI的图标 &ndash;&gt;-->
<!--            </button>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>


<script >
export default {
  data() {
    return {
      activeIndex: localStorage.getItem('activeMenu') || '', // 更新为与默认激活项相匹配的值
      Login: false,
      Register: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null,
      likeArticleList:[],
      likeProblemList:[]

    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user;
    }
  },
  mounted() {
    const user = localStorage.getItem("user");

    if (user) {
      this.user = JSON.parse(user);
      // 更新Vuex状态等
    }
  },
  created() {
    this.getLikeArticleList()
    this.getLikeProblemList()
  },
  methods:{

    getLikeArticleList(){
      console.log(this.userInfo.status)
      if (this.userInfo.status===1){
        this.request.get('article/article/getTeacherLikeArticle/'+this.userInfo.id)
            .then(res=>{
              this.likeArticleList=res.likeVoList
            })
      }else if (this.userInfo.status===2){
        this.request.get('article/article/getStudentLikeArticle/'+this.userInfo.id)
            .then(res=>{
                  if (res.code===200){
                    this.likeArticleList=res.likeVoList
                  }
            })
      }
    },
    getLikeProblemList(){
      console.log(this.userInfo.status)
      if (this.userInfo.status===1){
        this.request.get('problem/problem/getTeacherLikeProblem/'+this.userInfo.id)
            .then(res=>{
              this.likeProblemList=res.likeVoList
            })
      }else if (this.userInfo.status===2){
        this.request.get('problem/problem/getStudentLikeProblem/'+this.userInfo.id)
            .then(res=>{
              if (res.code===200){

                this.likeProblemList=res.likeVoList
              }
            })
      }
    }
  },

}

</script>


<style scoped>
.container {
  background-color: #fff;
  border-radius: 10px; /* 为容器添加圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  width: 1200px; /* 根据需要调整宽度 */
  margin: 80px auto; /* 居中显示 */
  padding: 10px; /* 容器内边距 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 子元素水平居中 */
  text-align: center; /* 文本居中 */
  margin-top: 10px;
}

.container img {
  border-radius: 50%; /* 圆形头像 */
  width: 80px; /* 头像宽度 */
  height: 80px; /* 头像高度 */
  object-fit: cover; /* 确保图片覆盖整个区域，同时保持宽高比 */
  margin-bottom: 20px; /* 头像与用户名之间的间距 */
}

.container span {
  font-size: 24px; /* 用户名字体大小 */
  font-weight: 600; /* 用户名字体加粗 */
  color: #333; /* 用户名字体颜色 */
}
.section-title {
  margin: 20px 0; /* 上下边距 */
  padding: 5px 10px;
  background-color: #52bcce;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 40px; /* 根据需要设置标题的高度 */
}

.question-title{
  margin: 20px 0; /* 上下边距 */
  padding: 5px 10px;
  background-color: orange;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 40px; /* 根据需要设置标题的高度 */
}

.likes-section {
  width: 100%;
  margin-top: 20px;
}

.article-preview {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  padding: 15px;
}

.article-image {
  width: 200px; /* 根据需要调整图片宽度 */
  height: 150px; /* 根据需要调整图片高度 */
  object-fit: cover;
  margin-right: 20px;
  border-radius: 5px;
}

.article-details h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    width: auto;
    padding: 20px;
  }

  .article-image {
    width: 150px; /* 在小屏幕上减小图片尺寸 */
  }
}

.like{
  margin: 20px 0; /* 上下边距 */
  padding: 5px 10px;
  background-color: #128fbd;
  color: #ffffff;
  font-size: 18px;
  border-radius: 5px;
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 40px; /* 根据需要设置标题的高度 */
}
.article-preview {
  position: relative; /* 添加相对定位 */
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  padding: 15px;
  /* 确保有足够的空间在右下角放置删除按钮 */
  padding-bottom: 40px; /* 根据按钮大小和样式调整 */
}

.article-actions {
  position: absolute; /* 绝对定位 */
  bottom: 10px; /* 距离底部的距离 */
  right: 10px; /* 距离右侧的距离 */
}

.article-actions button {
  background: none;
  border: none;
  color: #f56c6c; /* 删除图标的颜色 */
  font-size: 20px;
  cursor: pointer;
  outline: none; /* 移除点击时的默认边框 */
  padding: 5px; /* 添加一些内边距 */
  border-radius: 50%; /* 使按钮看起来更平滑 */
}

.article-actions button:hover {
  color: #e45656; /* 鼠标悬停时的颜色 */
  background-color: rgba(245, 108, 108, 0.2); /* 鼠标悬停时的背景色 */
}

/* 响应式设计中的样式调整 */
@media (max-width: 768px) {
  .article-actions button {
    font-size: 18px; /* 在小屏幕上减小图标尺寸 */
  }
  .article-preview {
    padding-bottom: 35px; /* 根据按钮大小和样式调整 */
  }
}
</style>